<template>
    <div class="page7">
        <div class="tips-marks" v-if="tipsLoading">
            <div class="tips-box">
                <div class="title">提示</div>
                <p>{{ tipmsg }}</p>
                <div class="btn-close" @click="closeTips">确定</div>
            </div>
        </div>
        <div class="loading-marks" v-if="loading">
            <img class="laoding-an" src="../../assets/images/laoding.png" alt="" />
        </div>
        <div class="first" v-if="firstlogin">
            <div :class="[animate__shakeX_active ? 'animate__shakeX' : '']">
                <div class="top">
                    <div class="containt">
                        <p>仰望星空，观宇宙之大；</p>
                        <p>脚踏实地，谱数智华章！</p>
                        <p>请收下这张“数字漫游”的<span class="yellowfont"> 宇航船票 </span>。</p>
                    </div>
                </div>
                <div class="center">
                    <div class="left">
                        <p class="leftp1">点击选择</p>
                        <p>登陆飞船</p>
                        <!-- <p>的宇航员</p> -->

                    </div>
                    <div class="right">
                        <div @click="activety(0)" :class="['button', activeIndex == 0 ? 'active' : '']">
                            <img src="../../assets/images/bill2022/7/ktcx.png">
                        </div>
                        <div @click="activety(1)" :class="['button', activeIndex == 1 ? 'active' : '']">
                            <img src="../../assets/images/bill2022/7/zqpb.png">
                        </div>
                        <div @click="activety(2)" :class="['button', activeIndex == 2 ? 'active' : '']">
                            <img src="../../assets/images/bill2022/7/ywzq.png">
                        </div>
                        <div @click="activety(3)" :class="['button', activeIndex == 3 ? 'active' : '']">
                            <img src="../../assets/images/bill2022/7/czyh.png">
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="tiao"></div>
                    <div class="piao"></div>
                </div>
            </div>
        </div>
        <div class="second" v-else>
            <!-- <div v-if="img2">
                <img :src="img2" alt="" srcset="">
            </div> -->
            <div >
                <div class="box animate__bounce" >
                    <div class="cantaint" ref="slide1" :style="{ backgroundImage: 'url(' + cantaintbg + ')' }">
                        <p class="name2">尊敬的乘客</p>
                        <div class="title2">
                            <img :src="titleimg">
                        </div>
                        <img class="xt" :src="xtimg">
                        <div class="card">
                            <div class="xm">
                                <img class="xmImg" src="../../assets/images/bill2022/7/ktcx/xm.png" >
                                <p class="name">{{  theme.aboardTime }}</p>
                                <p class="time">{{ theme.sequenceNo || resData.sequenceNo }}</p>
                            </div>
                            <div class="addr">
                                <p>【始发地】</p>
                                <p class="addr2">{{ theme.departurePlace=='中国通用技术发射场' ? '集团总部发射场': theme.departurePlace}}</p>
                                <p>【目的地】</p>
                                <p class="addr2">“智慧通用”数字空间站</p>
                            </div>
                        </div>
                        <div class="bm">
                            <p>【航班】GT2022-2023</p>
                        </div>
                    </div>
                </div>

            </div>

            <div class="cz">
                <div class="bcfx">
                    <div class="bc" @click="bc">
                        <img src="../../assets/images/bill2022/7/ktcx/bc.png">
                    </div>
                    <div class="fx" @click="fx" style="margin-left:3rem">
                        <img src="../../assets/images/bill2022/7/ktcx/fx.png">
                    </div>

                </div>
                <div class="xcck" @click="cxck">
                    <img src="../../assets/images/bill2022/7/ktcx/cxck.png">
                </div>

            </div>




        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import { GENERATEFLIGHT } from '@/api'
export default {
    components: {
    },
    props: ["theme",'linshiData'],
    // 定义属性
    data() {
        return {
            img2: "",
            resData: {},
            animate__shakeX_active: false,
            sequenceNo: 'GT-1008',
            tipmsg: '',
            tipsLoading: false,
            loading: false,
            firstlogin: true,
            activeIndex: -1,
            cantaintbg: require('../../assets/images/bill2022/7/ktcx/bg1.png'),
            xtimg: require('../../assets/images/bill2022/7/ktcx/xt1.png'),
            titleimg: require('../../assets/images/bill2022/7/ktcx/title1.png'),
            img: '',
            pageOneImg: null,
            buttonindex: -1,
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        console.log('theme', this.theme)
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() { 
        
        if (this.theme.generated) {
            this.firstlogin = false
            this.activeIndex=this.theme.theme;

        } else {
            this.firstlogin = true
            
            
        }
        this.thme();

    },
    // 方法集合
    methods: {
        ad() {
            alert('bcfx')
        },
        //调用生成船票
        async ticket() {
            let data = {
                userName: this.linshiData,
                theme: this.activeIndex
            }
            const res = await GENERATEFLIGHT(data)
            this.resData = res.data
            if (Object.prototype.toString.call(res) !== '[object Object]') {
                this.httpsLoading = true
                this.loading = false
                return false
            }
        },
        thme() {

            if (this.activeIndex == 0) {
                this.cantaintbg = require('../../assets/images/bill2022/7/ktcx/bg1.png');
                this.xtimg = require('../../assets/images/bill2022/7/ktcx/xt1.png');
                this.titleimg = require('../../assets/images/bill2022/7/ktcx/title1.png');
            }
            if (this.activeIndex == 1) {
                this.cantaintbg = require('../../assets/images/bill2022/7/ktcx/bg2.png');
                this.xtimg = require('../../assets/images/bill2022/7/ktcx/xt2.png');
                this.titleimg = require('../../assets/images/bill2022/7/ktcx/title2.png');
            }
            if (this.activeIndex == 3) {
                this.cantaintbg = require('../../assets/images/bill2022/7/ktcx/bg3.png');
                this.xtimg = require('../../assets/images/bill2022/7/ktcx/xt3.png');
                this.titleimg = require('../../assets/images/bill2022/7/ktcx/title3.png');
            }
            if (this.activeIndex == 2) {
                this.cantaintbg = require('../../assets/images/bill2022/7/ktcx/bg4.png');
                this.xtimg = require('../../assets/images/bill2022/7/ktcx/xt4.png');
                this.titleimg = require('../../assets/images/bill2022/7/ktcx/title4.png');
            }
        },
        cxck() {

            // this.$emit('fatherMethod')
            // console.log(this.$parent.$parent.$parent)
            this.$parent.$parent.$parent.cxckClick();
        },
        closeTips() {
            this.tipsLoading = false
            // MXWebui.closeWindow()
        },
        screenShot(type) {

            this.$nextTick(() => {
                // this.pageOneImg = this.$refs.slide1
                let width = this.pageOneImg.offsetWidth
                console.log(width)
                console.log(window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth)
                html2canvas(this.pageOneImg, {
                    width: width,
                    // height:
                    //   window.innerHeight ||
                    //   document.documentElement.clientHeight ||
                    //   document.body.clientHeight,
                }).then((canvas) => {
                    this.loading = false;
                    // alert('成果了')
                    // this.shareFlag = true;
                    // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                    this.img = canvas.toDataURL('image/jpeg', 1)
                    console.log(this.img)
                    this.img2 = this.img
                    this.img = (this.img + '').split('base64,')[1]
                    var appParams = {
                        base64Img: this.img//图片base64编码
                    }
                    if (type == 'fx') {
                        MXCommon.sharePicToWx(
                            this.img, // 图片base64编码
                            this.completeCallback,
                            this.errorCallBack
                        )
                    }
                    if (type == 'bc') {
                        MXCommon.saveImg(
                            appParams,
                            this.completeCallback1,
                            this.errorCallBack1
                        );
                    }

                })
            })
        },
        activety(index) {
            this.animate__shakeX_active = true;
            this.activeIndex = index;
            this.ticket();
            this.thme();
            setTimeout(() => {
                this.firstlogin = false;
                this.animate__shakeX_active = false;
            }, 1000);

        },
        bc() {
            this.$nextTick(() => {
                this.pageOneImg = this.$refs.slide1
                this.loading = true;
                setTimeout(() => {
                    this.screenShot('bc');
                }, 800);

            })


            // this.buttonindex = 0;
            // setTimeout(() => {
            //     this.buttonindex = -1;
            // }, 500);
        },
        fx() {
            this.$nextTick(() => {
                this.pageOneImg = this.$refs.slide1
                this.loading = true;
                setTimeout(() => {
                    this.screenShot('fx')
                }, 800);

            })


            // this.buttonindex = 1;
            // setTimeout(() => {
            //     this.buttonindex = -1;
            // }, 500);

        },

        completeCallback() {
            this.loading = false;
            // alert('分享成功')
        },
        errorCallBack() {
            this.tipsLoading = true;
            this.tipmsg = '分享失败，请重试'
        },
        completeCallback1() {
            this.tipsLoading = true;
            this.tipmsg = '保存成功';
            // alert('成功')
        },
        errorCallBack1() {
            this.tipsLoading = true;
            this.tipmsg = '保存失败'
        },

    }

}
</script>

<style lang='less' scoped>
.page7 {
    .name2{
        font-size:2rem;
        color: #3f20a6;
        font-weight: 600;
        // line-height: 4rem;
        margin-top: 3rem;
        text-align: left;
        margin-left: 3.3rem;
    }
    .first {

        .top {
            margin: 0 auto;
            width: 45.5rem;
            height: 18rem;
            background: url(../../assets/images/bill2022/7/kuang.png);
            background-size: 100% 100%;
            background-position: center center;
            font-size: 2.1rem;
            color: #fff;
            text-align: left;
            line-height: 3rem;
            padding: 2rem;

            .containt {
                margin-top: 2rem;
                margin-left: 2rem;
            }

            .yellowfont {
                color: #fbd858;
                font-weight: 600;
                font-size: 2.25rem;

            }
        }

        .center {
            margin: 0 auto;
            width: 45.5rem;
            height: 18.5rem;
            background: url(../../assets/images/bill2022/7/kuang2.png);
            background-size: 100% 100%;
            background-position: center center;
            font-size: 2.1rem;
            color: #fff;
            display: flex;
            padding: 2rem;
            padding-left: 1.6rem;

            .left {
                width: 12rem;
                margin-right: 1rem;
                font-size: 2.1rem;
                font-family: PingFang SC, PingFang SC-Medium;
                flex-shrink: 0;
                .leftp1 {
                    margin-top: 1.2rem;
                    font-size: 2.25rem;
                    font-weight: 600;
                    line-height: 7rem;
                    color: #fbd858;

                }
            }

            .right {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                padding-left: 1rem;
                padding-top: 0.9rem;
                padding-bottom: 0.9rem;

                .button {
                    margin-top: 1rem;
                    margin-right: 1rem;
                    width: 12rem;
                    height: 4.75rem;
                    background: url(../../assets/images/bill2022/7/bluebutton.png) no-repeat;
                    background-size: 100% 100%;

                    img {
                        width: 9rem;
                        margin-top: 1.2rem;
                    }
                }

                .active {
                    background: url(../../assets/images/bill2022/7/redbutton.png) no-repeat;
                    background-size: 100% 100%;
                }

            }

        }

        .bottom {
            margin-top: 2rem;

            .tiao {
                margin: 0 auto;
                width: 45.5rem;
                height: 7.8rem;
                background: url(../../assets/images/bill2022/7/qitiao.png) no-repeat;
                background-size: 100% 100%;
            }

            .piao {
                margin: 0 auto;
                height: 32.2rem;
                width: 36.5rem;
                background: url(../../assets/images/bill2022/7/piao.png) no-repeat;
                background-size: 100% 100%;
                position: relative;
                top: -4rem;
            }
        }

    }

    .second {
        .cantaint {
            margin: 0 auto;
            margin-top: 2rem;
            width: 41.25rem;
            height: 64.8rem;
            background-size: 100% 100%;
            background-position: center center;
            overflow: hidden;
            border: 1px solid #fff;
            border-radius: 2.2rem;
            // background-position-x: -9px;

            .title2 {
                width: 30rem;
                // height: 6rem;
                // margin-top: 4rem;
                margin-left: 3.5rem;
                margin-bottom: 0.8rem;
                font-size: 3rem;
                img{
                    width: 30rem;
                    
                   
                }
            }

            .xt {
                width: 34.4rem;
                margin-top: 0.5rem;
            }

            .card {
                margin: 0 auto;
                margin-top: 2rem;
                height: 12.5rem;
                width: 34.4rem;
                //    background: red; 
                text-align: justifyLeft;
                color: #3f20a6;
                display: flex;


                .xm {
                    width: 10rem;
                    flex-shrink: 0;
                    // background: url(../../assets/images/bill2022/7/ktcx/xm.png) no-repeat;
                    background-size: contain;
                    font-size: 2.1rem;
                    position: relative;
                    .xmImg{
                        position:absolute ;
                        left: 0;
                        // z-index: -1;

                    }

                    .name {
                        margin-top: 3rem;
                        font-weight: 600;
                        font-size: 1.9rem;
                    }

                    .time {
                        margin-top: 3.5rem;
                        font-weight: 600;
                        font-size: 1.8rem;
                    }

                }

                .addr {
                    margin-top: 0.5rem;
                    flex: 1;
                    // background: blue;
                    margin-left: 2rem;
                    font-size: 1.5rem;
                    text-align: left;
                    line-height: 2.6rem;
                    overflow: hidden;

                    .addr2 {
                        font-weight: 600;
                        white-space: nowrap;
                        overflow: hidden;
                        font-size: 1.75rem;
                        margin-left: 0.6rem;
                        margin-bottom: 0.5rem;

                    }
                }
            }

            .bm {
                margin: 0 auto;
                margin-top: 2rem;
                height: 4rem;
                width: 34.4rem;
                border-top: 1px solid #3f20a6;
                font-size: 1.5rem;
                color: #3f20a6;
                line-height: 4rem;
                font-weight: 600;
                // background: red;
            }

        }

        .cz {
            width: 100%;
            height: 7rem;
            // background: #fff;
            margin-top: 2rem;
            position: absolute;
            bottom: 6.5rem;

            .bcfx {
                // margin-top: 4rem;
                // background-color:red ;
                position: relative;

                height: 5rem;
                // margin-bottom: 1rem;
                // display: flex;
                // justify-content: center;

            }

            .bc {
                display: inline-block;
                // background-color: #3f20a6;
                width: 16rem;
                height: 5rem;

                img {
                    width: 16rem;
                    height: 4rem;
                }
            }

            .fx {
                display: inline-block;
                // background-color: #fbd858;
                width: 16rem;
                height: 5rem;

                img {
                    width: 16rem;
                    height: 4rem;
                }

            }




            .xcck {
                img {
                    margin-top: 2rem;
                    width: 14rem;
                }

            }

            .activebutton {
                transform: translateY(0.5rem);
            }
        }

    }


}

.loading-marks {
    position: absolute;
    z-index: 99999999;
    background: rgba(0, 0, 0, .6);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 5rem;
        height: 5rem;

    }

    .laoding-an {
        animation: laodingAn 1s ease-in-out infinite forwards;
    }
}

@keyframes laodingAn {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
    }
}


.tips-marks {
    position: absolute;
    z-index: 99999999;
    background: rgba(0, 0, 0, .6);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
    display: flex;
    justify-content: center;
    align-items: center;

    .tips-box {
        width: 90%;
        height: 20rem;
        background: #fff;
        border-radius: 2rem;
        margin-top: -10rem;

        .title {
            width: 100%;
            height: 8rem;
            line-height: 8rem;
            font-size: 2.5rem;
            font-weight: 600;
            color: #333;
        }

        p {
            margin-top: 1rem;
            font-size: 2.1rem;
            color: #999;
        }

        .btn-close {
            width: 100%;
            height: 5.5rem;
            // background: #f00;
            margin-top: 3rem;
            border-top: 1px solid #eee;
            font-size: 2.5rem;
            line-height: 5.5rem;
        }
    }

}

@keyframes shakeX {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.animate__shakeX {
    animation: shakeX 1s ease-in-out;
    animation-iteration-count: 2;
}






@keyframes flipInY {
    0% {
        // -webkit-transform: perspective(400px) rotateY(90deg);
        transform: rotateY(0deg);
        // -webkit-animation-timing-function: ease-in;
        // animation-timing-function: ease-in;
        // opacity: 0
    }

    5% {
        // -webkit-transform: perspective(400px) rotateY(90deg);
        transform: rotateY(360deg);
        // -webkit-animation-timing-function: ease-in;
        // animation-timing-function: ease-in;
        // opacity: 0
    }

    to {
        // -webkit-transform: perspective(400px) rotateY(10deg);
        transform: rotateY(0);
        // opacity: 1
    }
}

.animate__flipInY {

    animation: flipInY 0.5s ease-in-out;
    animation-iteration-count: 1;

}

.box {
    width: 100%;
    // background: red;
}

@keyframes bounce {

    0%,
    20%,
    53%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }

    80% {
        -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0) scaleY(.95);
        transform: translateZ(0) scaleY(.95)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

.animate__bounce {
    animation: bounce 0.5s ease-in-out;
    animation-iteration-count: 1;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}
</style>